<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        #Buts {
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>

    <canvas id="canvas">

    </canvas>
</body>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_PvM4;
    uniform mat4 u_ModelM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = 20.0;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
      gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector2, Vector3, Color, PerspectiveCamera, Quaternion, Spherical } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';

    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");
    //开始背景遮挡
    // gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
    //#endregion


    let poly = new Poly({
        gl: gl,
        arr: [
            0, 0.3, 0,
            0.3, -0.3, 0,
            -0.3, -0.3, 0
        ],
        list: [
            { name: 'a_Position', size: 3, beginIndex: 0 }
        ],
        uniforms: {
            'u_Color': {
                type: 'uniform4fv',
                value: [1, 0, 0, 1]
            },
            'u_PvM4': {
                type: 'uniformMatrix4fv',
                value: new Matrix4().elements
            },
            'u_ModelM4': {
                type: 'uniformMatrix4fv',
                value: new Matrix4().elements
            },
        }
    });

    poly.draw(['POINTS']);
</script>

</html>